<template>
  <view class="page-my">
    <uni-nav-bar left-text="个人信息" backgroundColor="#eee"></uni-nav-bar>
    <u-cell-group>
    	<u-cell-item title="头像" :arrow="true" arrow-direction="right" @click="upload">
        <u-avatar class="ava" :src="myInfo.avatar" mode="square" size="120"></u-avatar>
      </u-cell-item>
      <u-cell-item title="昵称" :value="myInfo.nick" :arrow="true" arrow-direction="right" @click="navTo('nick')"></u-cell-item>
      <u-cell-item title="签名" :value="myInfo.sign" :arrow="true" arrow-direction="right" @click="navTo('sign')"></u-cell-item>
      <u-cell-item title="性别" :value="myInfo.gender" :arrow="true" arrow-direction="right" @click="navTo('gender')"></u-cell-item>
      <u-cell-item title="账号" :value="myInfo.account" :arrow="false" hover-class="none"></u-cell-item>
    </u-cell-group>
  </view>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    data () {
      return {
      }
    },
    computed: {
      ...mapState({
        myInfo: (state) => {
          return state.app.myInfo
        }
      })
    },
    methods: {
      upload() {
        const me = this;
        uni.chooseImage({
          count: 1, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album'], //从相册选择
          success: function (res) {
            let imgFiles = res.tempFilePaths   //图片的本地文件路径列表
            
            uni.uploadFile({
              url: `/01/upload`,   //后端用于处理图片并返回图片地址的接口
              filePath: imgFiles[0],
              name: 'userfile',
              success: res => {
                let data=JSON.parse(res.data)   //返回的是字符串，需要转成对象格式，打印data如下图
				
				me.$store.dispatch('app/updateMyInfo', {
					...me.myInfo,
					avatar: 'http://129.28.159.96:9000/' + data.data.url,
				})
              },
              fail: () => {}
            })
          }
        });
      },
    }
  }
</script>

<style scoped lang="scss">
  .page-my {
    .ava {
      width: 150rpx;
      height: 150rpx;
    }
  }
</style>
